<template>
	<div id="home">
		<router-view/>
	    <img @click="Top" id="top" src="../../static/img/top.png"/>
	    <footer>
	    	<!--<router-link v-wechat-title='$route.meta.title' v-for="item in footerList" :to='{path:item.path}'>
				<img :src="item.path === $route.path?item.Src2:item.Src1" />
				<p>{{item.name}}</p>
			</router-link>-->
	    	<router-link v-wechat-title='$route.meta.title' to='/home/index'>
				<img v-if="'/home/index' === $route.path" src="../../static/img/footer-01-02.png" />
				<img v-else src="../../static/img/footer-01-01.png" />
				<p>首页</p>
			</router-link>
	    	<router-link v-wechat-title='$route.meta.title' to='/home/good'>
				<img v-if="'/home/good' === $route.path" src="../../static/img/footer-02-02.png" />
				<img v-else src="../../static/img/footer-02-01.png" />
				<p>赶紧试</p>
			</router-link>
	    	<router-link v-wechat-title='$route.meta.title' to='/user/shareUser'>
				<img src="../../static/img/footer-center.gif" />
				<p>分享赚钱</p>
			</router-link>
	    	<router-link v-wechat-title='$route.meta.title' to='/home/myActivity'>
				<img v-if="'/home/myActivity' === $route.path" src="../../static/img/footer-03-02.png" />
				<img v-else src="../../static/img/footer-03-01.png" />
				<p>我的活动</p>
			</router-link>
	    	<router-link v-wechat-title='$route.meta.title' to='/home/my'>
				<img v-if="'/home/my' === $route.path" src="../../static/img/footer-04-02.png" />
				<img v-else src="../../static/img/footer-04-01.png" />
				<p>我的</p>
			</router-link>
	    </footer>
	</div>
</template>

<script>
export default{
	name: 'home',
	data:function(){
	  	return{
	  		footerList: [
	        {
	          path: '/home/index',
	          name: '首页',
	          Src1: '../../static/img/footer-01-01.png',
	          Src2: '../../static/img/footer-01-02.png'
	      	},
	        {
	          path: '/home/good',
	          name: '赶紧试',
	          Src1: '../../static/img/footer-02-01.png',
	          Src2: '../../static/img/footer-02-02.png'
	      	},
	        {
	          path: '/user/shareUser',
	          name: '分享赚钱',
	          Src1: '../../static/img/footer-center.gif',
	          Src2: '../../static/img/footer-center.gif'
	      	},
	        {
	          path: '/home/myActivity',
	          name: '我的试用',
	          Src1: '../../static/img/footer-03-01.png',
	          Src2: '../../static/img/footer-03-02.png',
	      	},
	        {
	          path: '/home/my',
	          name: '我的',
	          Src1: '../../static/img/footer-04-01.png',
	          Src2: '../../static/img/footer-04-02.png'
	      	},
	      ]
	  	}
	  },
	  methods: {
	  	Top: function(){
	  		var timer = null;
	  		cancelAnimationFrame(timer);
				timer = requestAnimationFrame(function fn(){
					var oTop = document.body.scrollTop || document.documentElement.scrollTop;
					if(oTop > 0){
					document.body.scrollTop = document.documentElement.scrollTop = oTop - 80;
					timer = requestAnimationFrame(fn);
					}else{
					cancelAnimationFrame(timer);
					} 
				});
	  	}
	  }
}
</script>

<style scoped>
#home{
	min-height: 100%;
}
/*----------回顶部-----------*/
#top{
	width: 4rem;
	height: 4rem;
	position: fixed;
	bottom: 5.5rem;
	right: 0.5rem;
	display: block;
}
/* ========== */
/* = Footer = */
/* ========== */
footer{
	width: 100%;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 5rem;
	display: flex;
	align-items: center;
	border-top: 1px solid #eeeeee;
}
footer a{
	width: 20%;
}
footer a:nth-child(3) img{
	height: 4rem;
	margin-top: -2rem;
}
footer a img{
	height: 2rem;
	display: block;
	margin: 0 auto;
	margin-bottom: 0.3rem;
}
footer a p{
	font-size: 1rem;
	text-align: center;
}
footer .router-link-active{
	color: #ff6565;
}
</style>